<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/echarts.min.js"></script>
<script src="../js/jquery-1.7.1.js"></script>
<title>统计报表2</title>
<link rel="stylesheet" href="../css/07TJBB.css">
</head>

<body>
<div class="body">
<div class="top">
  <div class="nav-top">
     <div id="menu_left">
	   <img src="../image/02main.jpg" />
     </div>
     <div class="title">
       <img class="img1" src="../image/daohangtiao1.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:6px; color:#cfdef7; font-family:黑体; font-size:12px;">我的中心</a></td>
           </tr>
         </table>
       </div>
       <img class="img2" src="../image/daohangtiao1.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:80px; color:#cfdef7; font-family:黑体; font-size:12px;">在线登记</a></td>
              <td><a href="#" style="color:#cfdef7; font-family:黑体;">×</a></td>
           </tr>
         </table>
       </div>
       <img class="img3" src="../image/daohangtiao1.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:165px; color:#cfdef7; font-family:黑体; font-size:12px;">工时查询</a></td>
              <td><a href="#" style="color:#cfdef7; font-family:黑体;">×</a></td>
           </tr>
         </table>
       </div>
       <img class="img4" src="../image/daohangtiao2.jpg" />
       <div class="tab">
         <table>
           <tr>
              <td><a href="#" style="margin-left:250px; color:#006ce0; font-family:黑体; font-size:12px;"><b>统计报表</b></a></td>
              <td><a href="#" style="color:#a1a4a6; font-family:黑体;"><b>×</b></a></td>
           </tr>
         </table>
       </div>
     </div>
     <div class="menu_rigth">
       <p style="font-size:14px; color:#FFF;">欢迎您，</p><p class="p1">刘小芸</p>
       <ul>
         <li class="li1"><a href="#"><img src="../image/daohangtiao_suo.jpg" style="margin-left:110px; width:18px; height:18px;"/></a></li>
         <li class="li2"><a href="#"><img src="../image/daohangtiao_out.jpg" style="margin-left:140px; width:18px; height:18px;" /></a></li>
       </ul>
     </div>
  </div>
</div>


<div class="content">
  <div class="content1">
     <div class="content2">
       <div class="div1">
    	 <div class="div1">
    	   <span>查询时间</span>
           <input type="date" value="2016-03-01" class="input2"/> - <input type="date" value="2016-03-01" class="input2"/>
           <button class="button3">查询</button>
       </div>
       
       <div class="div2">
       <h4>&nbsp;团队工时统计</h4>
       <div id="container1"></div>
       <script type="text/javascript">
	       var dom = document.getElementById("container1");
           var myChart = echarts.init(dom);
           option = null;
           option = {
			   tooltip: {
				   trigger: 'item',
				   formatter: '{a} <br/>{b}: {c}h ({d}%)'
			   },
			   series: [
				   {
						name: '团队：CRM应用团队',
						type: 'pie',
						radius: ['25%', '50%'],
						startAngle:180,
						labelLine: {
							normal: {
								length: 15,
								length2: 70
							}
						},
						label: {
							formatter: '{b|{a}}\n {b|{b}：}{b|{c}h}  {per|{d}%} ',
							borderWidth: 20,
							borderRadius: 4,
							padding: [20, -30],
							rich: {
								a: {
									float:'left',
									color: '#999',
									lineHeight: 20,
									align: 'center',
								},
								b: {
									fontSize: 14,
									lineHeight: 33
								},
								per: {
									color: '#eee',
									backgroundColor: '#5a7087',
									padding: [2, 3],
								    borderRadius: 2,
								}
							}
						},
						data: [
						    {value: 400, name: '工时',itemStyle:{color: '#ff9b77'}},
                            {value: 258, name: '工时',itemStyle:{color: '#ffe171'}},
							{value: 142, name: '工时',itemStyle:{color: '#bddc7f'}}
					    ]
					}
				]
			};;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
       </script>
       </div>
       
       <div class="div3">
       <h4>&nbsp;员工工时统计</h4>
         <div id="container2">
            <div>
              <p class="p2">排序方式：</p>
              <div class="button2">
                <button class="button1">工时降序</button>
                <button class="button1">次数升序</button>
              </div>
              <div class="content4">
                <a href="#"><img src="../image/dian.jpg" /></a>
                <a href="#"><img src="../image/list.jpg" /></a>
              </div>
              <div class="content3">
                <table class="table1" rules=none>
                   <tr>
                     <th>姓名</th>
                     <th style="width:70px;">工时[h]</th>
                     <th style="width:70px;">次数[次]</th>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                </table>
                <table class="table2" rules=none>
                   <tr class="tr1">
                     <th>姓名</th>
                     <th>工时[h]</th>
                     <th>次数[次]</th>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                </table>
                <table class="table3" rules=none>
                   <tr class="tr1">
                     <th>姓名</th>
                     <th>工时[h]</th>
                     <th>次数[次]</th>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr1">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr2">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                   <tr class="tr3">
                     <td>黄盼盼</td>
                     <td>191</td>
                     <td>12</td>
                   </tr>
                </table>
              </div>
              <div class="final">
                <a href="#" class="a1"><b> < </b></a>&nbsp;&nbsp; 
                <select class="select1">
                  <option value="第一页">第一页</option>
                  <option value="第二页">第二页</option>
                </select>
                &nbsp;&nbsp;<a href="#" class="a2"><b> > </b></a>
              </div>
            </div>
         </div>
       </div>
     </div>
  </div>
</div>


<div class="bottom">
   Copyright © 2015 中国电信股份有限公司福建分公司. All Rights Reserved
</div>
</div>
</body>
</html>